<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="dark">
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav style="width: fit-content" class="mx-auto">
          <b-nav-item
            v-for="(item,key) in menus"
            :key="key"
            @click="handleMenu(item.id)"
            :class="['mx-3',activeMenus === item.id ? 'active' : '']">
            {{ item.label }}
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
export default {
  name: 'myNav',
  props: ['menus', 'activeMenus'],
  methods: {
    handleMenu (id) {
      this.$emit('click1thMenu', id)
    }
  }
}
</script>

<style scoped>

</style>
